<!--
 * @Author: your name
 * @Date: 2021-07-20 14:21:01
 * @LastEditTime: 2021-09-09 16:50:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\components\imgList.vue
-->
<template>
  <div class="white-content" v-loading="pageLoading" element-loading-text="loading">
    <div class="newPageTitle">
      <span class="backIcon" @click="goBack"><i class="el-icon-back"></i></span>
      <h1 style="display:inline-block;margin-left:10px;font-weight: bold;">图片详情</h1>
    </div>
    <div class="content">
      <detail-card class="bottom-margin">
        <template v-slot:header>
          <span>{{word}}原因：{{datas.returnReason}}</span>
        </template>
        <template v-slot:content>
            <el-row :gutter="20" type="flex" justify="start">
              <el-col :span="8" v-for="(item,index) in srcList" :key="index">
                <div class="img-wrap">
                  <el-image
                    :src="item"
                    fit="contain"
                    :preview-src-list="srcList">
                  </el-image>
                </div>
              </el-col>
            </el-row>
          <div class="detail-section">
            <h2>补充描述：</h2>
            <el-row :gutter="20" type="flex" justify="start">
              <el-col>
                <!-- 需要修改绑定值 -->
                <span>{{datas.returnReasonRemark}}</span>
              </el-col>
            </el-row>
          </div>
        </template>
      </detail-card>
    </div>
  </div>
</template>

<script>
import DetailCard from '@/components/DetailCard'
import { operationImages } from '@/api/product'
export default {
  name: 'previewImgs',
  components: { DetailCard },
  data () {
    return {
      datas: {},
      id: '',
      returnOrderId: '',
      type: '',
      item: '',
      srcList: [],
      pageLoading: false,
      word: '',
      description: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    to.meta.parentPath = from.meta.parentPath
    to.meta.parentTitle = from.meta.parentTitle
    next()
  },
  mounted () {
    this.id = this.$route.params.id
    this.type = this.$route.params.type
    this.returnOrderId = this.$route.params.returnOrderId
    if (this.type === '1') {
      this.word = '退货'
    } else if (this.type === '2') {
      this.word = '退款'
    } else {
      this.word = '换货'
    }
    if (this.id) {
      this.operationImages(this.type)
    } else {
      this.goBack()
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    operationImages (type) {
      this.pageLoading = true
      if (type) {
        const params = {
          id: this.id,
          owerType: this.type
        }
        if (this.returnOrderId) {
          params.id = this.returnOrderId
          params.owerType = '1'
        }
        operationImages(params)
          .then(res => {
            if (res) {
              this.pageLoading = false
              if (Number(res.code) === 1) {
                const obj = res.obj
                this.datas = obj
                obj.list.forEach(e => {
                  this.srcList.push(e.path)
                })
              } else {
                this.$confirm(res.code, {
                  confirmButtonText: '确定',
                  showCancelButton: false
                })
              }
            }
          })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.footer {
  width: 100%;
  margin: 0;
}
.detail-section{
    h2 {
        margin: 15px 0;
        font-weight: bold;
    }
}
/deep/ .el-form-item{
    margin-bottom: 0;
}
.img-wrap{
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .el-row--flex{
  flex-wrap: wrap;
}
/deep/ .el-col-8{
  border: 1px solid #f5f7fa !important;
}
/deep/ .el-form--label-left .el-form-item__label {
    text-align: center;
}
</style>
